<template>
  <div class="unfinished-work">
    <div class="unfinished-tabs">
      <span :class="activeName=='unfinish'?'active':''" @click="handleTab('unfinish')">未完成年度施工节点</span>
      <span
        :class="activeName=='points'?'active':''"
        style="margin-left: 22px;"
        @click="handleTab('points')"
      >扣分信息</span>
    </div>
    <div class="unfinished-content">
      <div v-if="activeName=='unfinish'" class="unfinish-content">
        <el-table :data="tableData1" height="340" style="width: 100%;over-flow:auto;">
          <el-table-column prop="renwu" label="任务名称" width="320" />
          <el-table-column prop="xiangmmc" label="所属项目" />
          <el-table-column prop="date" label="完成期限" width="140" />
        </el-table>
      </div>
      <div v-if="activeName=='points'" class="points-content">
        <el-table :data="tableData2" height="340" style="width: 100%;over-flow:auto;">
          <el-table-column prop="koufmc" label="扣分事项" width="320" />
          <el-table-column prop="xiangmmc" label="所属项目" />
          <el-table-column prop="points" label="扣分分值" width="140" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Global from '../../utils/Global.js'
const uplodadUrl = Global.uplodadUrl
export default {
  data() {
    return {
      activeName: 'unfinish',
      tableData1: [],
      tableData2: []
    }
  },
  mounted() {
    this.GetUncompleteNodesOfYear()
    this.GetPointDeductionInfos()
  },
  methods: {
    GetUncompleteNodesOfYear() {
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetUncompleteNodesOfYear`
      }).then((res) => {
        // console.log(res, '未完成年度施工节点')
        this.tableData1 = []
        res.data.data.forEach(item => {
          const obj = {}
          obj.renwu = item.mubjd
          obj.xiangmmc = item.xiangmmc
          obj.date = item.jihwcsj.split('T')[0]
          this.tableData1.push(obj)
        })
      })
    },
    GetPointDeductionInfos() {
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetPointDeductionInfos`
      }).then((res) => {
        // console.log(res, '扣分事项')
        this.tableData2 = []
        res.data.data.forEach(item => {
          const obj = {}
          obj.koufmc = item.koufmc
          obj.xiangmmc = item.xiangmmc
          obj.points = item.kouffz
          this.tableData2.push(obj)
        })
      })
    },
    handleTab(val) {
      if (val === 'unfinish') this.activeName = 'unfinish'
      if (val === 'points') this.activeName = 'points'
    }
  }

}

</script>
<style lang="scss" scoped>
  .unfinished-work {
    width: 100%;
    height: 386px;
    margin-top: 5px;
    background: #FFFFFF;

    .unfinished-tabs {
      border-bottom: 1px solid #1468B7;
      padding-top: 7px;
      padding: 10px;

      span {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #909399;
        line-height: 22px;
        cursor: pointer;

      }

      .active {
        color: #333;
        font-weight: 600;
      }
    }

    .unfinished-content {
      padding: 6px 13px 26px 12px;

      .unfinish-content {
        .el-table--scrollable-y ::-webkit-scrollbar {
          display: none;
        }
      }

      .points-content {
        .el-table--scrollable-y ::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }

</style>
